<!-- 订单详情 -->
<template>
	<view class="page">
		<u-navbar :isFixed="true" title="订单详情" :borderBottom="false"></u-navbar>
		<view class="wrap">
			<view class="flex_align type">
				<view class="status" v-if="detail.status==1">待确认</view>
				<view class="status" v-if="detail.status==2">待付款</view>
				<view class="status" v-if="detail.status==3">待发货</view>
				<view class="status" v-if="detail.status==4">待收货</view>
				<view class="status" v-if="detail.status==5">{{type==0?'待结算':'待评价'}}</view>
				<view class="status" v-if="detail.status==6">已完成</view>
				<view class="status" v-if="detail.status==7">卖家已拒绝</view>
				<view class="status" v-if="detail.status==8">已取消</view>
				<view class="status" v-if="detail.status==9">{{type==0?'待结算':'已评价'}}</view>
				<view class="status" v-if="detail.status==10">售后中</view>
				<view class="status" v-if="detail.status==11">售后已完成</view>

				<view class="" v-if="detail.status==1||detail.status==2">
					<view class="date" v-if="timestamp>0">
						倒计时：　<u-count-down :timestamp="timestamp" :show-border="false" font-size="24" color="#F9E848"
							bg-color="#38be8c" separator-color="#F9E848" @end="isonshow"></u-count-down>
					</view>
				</view>
			</view>
			<view class="item" v-if="detail.status==7">拒绝原因：{{detail.refuse_note}}</view>
			<view class="item" v-else>
				<u-parse :html="detail.textarea"></u-parse>
			</view>
			<view class="white"></view>
		</view>
		<view class="progress">
			<!-- 进度 -->
			<block v-if="nowState>0">
				<view class="line">
					<view class="flex_align cur">
						<view class="line2" :style="{width:width*nowState+'rpx'}"></view>
						<view class="dot"></view>
					</view>
				</view>
				<view class="flex_align state">
					<view :class="index<=nowState?'end':''" v-for="(item,index) in progress" :key="index">{{item}}
					</view>
				</view>
			</block>
			<navigator hover-class="none" :url="'/home/station/stationpage?id='+detail.memberinfo.id"
				class="seller flex_bet_align" v-if="type==1">
				<view class="flex_align">
					<view class="name">卖家：{{detail.memberinfo.name}}</view>
					<image class="img" v-if="detail.memberinfo.mimage" :src="detail.memberinfo.mimage" mode="heightFix">
					</image>
					<view class="xin"><text>信</text>{{detail.memberinfo.credit_value}}</view>
					<view class="shi" v-if="detail.memberinfo.realname">实</view>
					<view class="qi" v-if="detail.memberinfo.enterprise">企</view>
				</view>
				<view class="iconfont icon-xwtubiaoku-03"></view>
			</navigator>
			<navigator hover-class="none" :url="'/home/index/supplydetail?id='+detail.goods_info.id"
				class="goods flex_align">
				<image class="goodsImg" :src="detail.goods_info.image"></image>
				<view class="content">
					<view class="goodsName clamp2">{{detail.goods_info.title}}</view>
					<view class="goodsName ">{{detail.goods_info.spec_value}}</view>
					<view class="price">￥{{detail.goods_info.money}}/{{detail.goods_info.unit}}</view>
				</view>
			</navigator>
			<view class="spec" v-if="detail.spec">
				<view class="tr" v-for="(item,index) in detail.spec" :key="index">
					<view class="td">{{index}}</view>
					<view class="td">{{item}}</view>
				</view>
			</view>
		</view>

		<view class="orderMsg">
			<view class="item flex_align">
				<view class="title">购买数量</view>
				<view>{{detail.number}}{{detail.goods_info.unit}}</view>
			</view>
			<view class="item flex_align">
				<view class="title">到货时间</view>
				<view class="value">{{detail.arrivaltime}}</view>
				<picker mode="date" :value="goodDate" :start="nowtime" @change="bindDateChange">
					<view class="setval" @click="time_show=true" v-if="detail.status==1">修改</view>
				</picker>
			</view>
			<view class="item flex">
				<view class="title">收货地址</view>
				<view class="value" @click="$plug.copyText(detail.username+detail.mobile+detail.city)">
					<view style="flex:1;"><text>{{detail.username}}</text>{{detail.mobile}}</view>
					<view style="flex:1;">{{detail.city}}</view>
				</view>
			</view>
			<view class="item flex">
				<view class="title">备注信息</view>
				<view class="value">{{detail.client_note}}</view>
			</view>
		</view>
		<view class="orderMsg">
			<view class="item flex_bet_align">
				<view class="title">订单编号</view>
				<view style="flex:1;" class="clamp1">{{detail.order_sn}}</view>
				<view class="tag" @click="$plug.copyText(detail.order_sn)">复制</view>
			</view>
			<view class="item flex_align">
				<view class="title">创建时间</view>
				<view class="value">{{detail.createtime}}</view>
			</view>
			<view class="item flex_align" v-if="detail.canceltime.length>0">
				<view class="title">取消时间</view>
				<view class="value">{{detail.canceltime}}</view>
			</view>
			<view class="item flex_align" v-if="detail.rejectiontime.length>0">
				<view class="title">拒绝时间</view>
				<view class="value">{{detail.rejectiontime}}</view>
			</view>
			<view class="item flex_align" v-if="detail.confirmtime.length>0">
				<view class="title">确认时间</view>
				<view class="value">{{detail.confirmtime}}</view>
			</view>
			<view class="item flex_align" v-if="detail.pay_time.length>0">
				<view class="title">支付时间</view>
				<view class="value">{{detail.pay_time}}</view>
			</view>
			<view class="item flex_align" v-if="detail.deliverytime.length>0">
				<view class="title">发货时间</view>
				<view class="value">{{detail.deliverytime}}</view>
			</view>
			<view class="item flex_align" v-if="detail.confirm_receivingtime.length>0">
				<view class="title">收货时间</view>
				<view class="value">{{detail.confirm_receivingtime}}</view>
			</view>
			<view v-if="detail.status==4||detail.status==5||detail.status==6" @click="expressDetail"
				class="expressDetail">
				查看物流
			</view>
		</view>
		<view class="orderMsg">
			<view class="item flex_align">
				<view class="title">待议单价</view>
				<view class="value">￥{{detail.unit_price}}</view>
				<view class="setval" @click="unit_show=true" v-if="type==0&&detail.status==1">修改价格</view>
			</view>
			<view class="item flex_align">
				<view class="title">其他杂费</view>
				<view class="value">￥{{detail.other_price}}</view>
				<view class="setval" @click="other_show=true" v-if="type==0&&detail.status==1">添加杂费</view>
			</view>
			<view class="item flex_align">
				<view class="title">总价</view>
				<view class="totalPrice">￥{{detail.count_price}}</view>
			</view>
		</view>

		<view class="orderMsg" v-if="detail.bill_id!=0&&detail.status!=1&&detail.status!=2">
			<view class="item flex_align">
				<view class="title">发票类型</view>
				<view class="value">{{detail.bill.type==1?'个人发票':'单位发票'}}</view>
			</view>
			<block v-if="detail.bill.type==1">
				<view class="item flex_align">
					<view class="title">个人名称</view>
					<view class="value">{{detail.bill.name}}</view>
				</view>
				<view class="item flex_align">
					<view class="title">收票人电话</view>
					<view class="value">{{detail.bill.tel}}</view>
				</view>
				<view class="item flex_align">
					<view class="title">收票人邮箱</view>
					<view class="value">{{detail.bill.email}}</view>
				</view>
				<view class="item flex_align">
					<view class="title">发票内容</view>
					<view class="value">{{detail.bill.content}}</view>
				</view>
			</block>
			<block v-if="detail.bill.type==2">
				<view class="item flex_align">
					<view class="title">公司名称</view>
					<view class="value">{{detail.bill.company_name}}</view>
				</view>
				<view class="item flex_align">
					<view class="title">公司税号</view>
					<view class="value">{{detail.bill.taxid}}</view>
				</view>
			</block>
		</view>

		<view class="foot flex_align">
			<view class="btn_fill" v-if="type==1&&detail.status==5" @click="goEvaluate">立即评价</view>
			<view class="btn_fill" v-if="type==1&&detail.status==4" @click="operate(5)">确认收货</view>
			<view class="btn_fill" v-if="type==1&&detail.status==2" @click="pay">立即支付</view>
			<view class="btn" v-if="type==1&&(detail.status==1||detail.status==2)" @click="operate(8)">取消订单</view>
			<view class="btn_fill" v-if="type==0&&detail.status==1" @click="operate(2)">接受订单</view>
			<view class="btn_fill" v-if="type==0&&detail.status==3" @click="operate(4)">立即发货</view>
			<view class="btn" v-if="type==0&&detail.status==1" @click="operate(7)">拒绝订单</view>
			<view class="btn" v-if="detail.status==6||detail.status==7||detail.status==8" @click="deleteOrder">删除订单
			</view>
			<!-- <view class="btn" v-if="detail.status==4" @click="expressDetail">查看物流</view> -->
			<view class="btn" @click="chat">聊一聊</view>
			<view class="btn" v-if="type==1" @click="dialing(1,detail.memberinfo.id,detail.memberinfo.mobile)">联系卖家
			</view>
			<view class="btn" v-else @click="dialing(2,detail.memberinfo.id,detail.memberinfo.mobile)">联系买家</view>
		</view>
		<!-- 填写物流公司 -->
		<u-popup mode="center" border-radius="16" v-model="logistics">
			<view class="modal">
				<view class="title">物流信息</view>

				<view class="flex_align item">
					<view class="name">配送方式</view>

					<radio-group @change="radioChange">
						<view class="flex_align ml20">
							<label class="flex_align ml20" v-for="(item, index) in sendlist" :key="index">
								<view>
									<radio :value="item.value" :checked="index === current" color="#38be8c" />
								</view>
								<view>{{item.name}}</view>
							</label>
						</view>
					</radio-group>
				</view>

				<view class="flex_align item">
					<view class="name">物流公司*</view>
					<view class="check">
						<input type="text" v-model="logistics_name" :placeholder="issend?'请选择物流公司':'请输入物流公司'"
							:disabled="issend">

						<view class="labox" v-if="havelogis">
							<picker @change="setcony" mode="selector" :value="index" :range="cony" range-key="company">
								<view class="iconfont icon-down1"></view>
							</picker>
						</view>

					</view>
				</view>
				<view class="flex_align item">
					<view class="name">物流单号*</view>
					<input type="text" v-model="logistics_order_sn" placeholder="请输入物流单号">
				</view>
				<view class="flex_align item">
					<view class="name">运送车牌号</view>
					<input type="text" v-model="carnum" maxlength="10" placeholder="请输入运送车牌号">
				</view>

				<view class="flex_align item" v-if="!havelogis">
					<view class="name">联系电话</view>
					<input type="text" v-model="phone" placeholder="请输入联系电话">
				</view>
				<view class="flex_align item" v-if="!havelogis">
					<view class="name">发货时间</view>

					<picker mode="date" :value="startDate" :start="nowtime" @change="bindDateChange">
						<view class="mainline">
							<veiw class="mainlineposition">{{startDate==''?'请选择发货时间':startDate}}</veiw>
							<u-icon name="arrow-right" color="#999999" size="24" class="mainicon"></u-icon>
						</view>
					</picker>

				</view>

				<view class="flex_align item" v-if="!havelogis">
					<view class="name">预计到达时间</view>
					<picker mode="date" :value="sendDate" :start="nowtime" @change="bindSendChange">
						<view class="mainline">
							<!-- <text class="mainlineposition" v-if="!setdate">请选择预计到达时间</text> -->
							<veiw class="mainlineposition">{{sendDate==''?'请选择发货时间':sendDate}}</veiw>
							<u-icon name="arrow-right" color="#999999" size="24" class="mainicon"></u-icon>
						</view>
					</picker>

				</view>
				<view class="confirm" @click="confirm">确定</view>
			</view>
		</u-popup>
		<!-- 待议单价 -->
		<u-popup mode="center" border-radius="16" v-model="unit_show" :closeable="true">
			<view class="modal">
				<view class="title">待议单价</view>
				<view style="height: 20rpx;"></view>
				<input type="digit" v-model="unit_price" placeholder="请输入待议单价">
				<view class="confirm" @click="addprice(1)">确定</view>
			</view>
		</u-popup>
		<!-- 添加杂费 -->
		<u-popup mode="center" border-radius="16" v-model="other_show" :closeable="true">
			<view class="modal">
				<view class="title">添加杂费</view>
				<view style="height: 20rpx;"></view>
				<input type="digit" v-model="other_price" placeholder="请输入杂费">
				<view class="confirm" @click="addprice(2)">确定</view>
			</view>
		</u-popup>
		<!-- 拒绝 -->
		<u-popup mode="center" border-radius="16" v-model="reason" :closeable="true">
			<view class="modal">
				<view class="title">拒绝理由</view>
				<view style="height: 20rpx;"></view>
				<u-input v-model="refuse_note" type="textarea" :border="true" placeholder="请输入拒绝理由" :maxlength="50"
					:autoHeight="true" class="mainlineinput" :clearable="false" height="200" />
				<view style="height: 20rpx;"></view>
				<u-button shape="circle" type="error" @click="refuse">确认拒绝</u-button>
				<view style="height: 20rpx;"></view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	var _this, shak;
	export default {
		data() {
			return {
				timestamp: 0,
				width: 132,
				progress: [],
				nowState: 0, //进度条进度
				logistics: false,
				id: 0, //订单id
				type: 0, //0卖家观看  1买家观看
				detail: {},
				// 显示拒绝理由
				reason: false,
				// 拒接理由
				refuse_note: "",
				// 物流单号
				logistics_order_sn: "",
				// 物流公司
				logistics_name: "",
				// 运送车牌号
				carnum: "",
				// 显示议价
				unit_show: false,
				// 显示杂费
				other_show: false,
				// 议价费用
				unit_price: "",
				// 其他杂费
				other_price: "",

				nowtime: '', //当前时间
				goodDate: '',

				cony: [], //物流公司
				havelogis: false, //是否有物流
				startDate: '',
				sendDate: '',
				phone: '', //手机号

				nowtime: '', //当前时间
				sendlist: [{
					value: '0',
					name: '配送'
				}, {
					value: '1',
					name: '自配',
				}],
				current: 0,

				issend: true, //配送方式
				cony_type: '', //选中物流公司的id
			}
		},
		onLoad(options) {
			console.log(options)
			_this = this
			_this.id = options.id
			_this.type = options.type
			_this.getdata()

		},
		onShow() {
			_this.getTime()
		},
		// 下拉刷新
		onPullDownRefresh: function() {
			_this.getdata()
		},
		methods: {
			// 刷新
			isonshow() {
				_this.timestamp = 0
				_this.getdata()
				_this.$plug.isonshow(2)
			},
			// 获取数据
			getdata() {
				_this.$api.get("orderdetails", {
					tab_type: (_this.type == 0 ? 2 : 1),
					order_id: _this.id
				}).then(data => {
					_this.detail = data
					_this.unit_price = data.unit_price
					// 卖家进度
					if (_this.type == 0) {
						_this.progress = ['已下单', '确认', '付款', '发货', '收货', '结算']
					} else {
						_this.progress = ['已下单', '确认', '付款', '发货', '收货', '已完成']
					}
					if (data.countdowntime > parseInt(Date.parse(new Date()) / 1000)) {
						_this.timestamp = data.countdowntime - parseInt(Date.parse(new Date()) / 1000)
					}
					switch (data.status) {
						case 1:
							_this.nowState = 1
							break;
						case 2:
							_this.nowState = 2
							break;
						case 3:
							_this.nowState = 3
							break;
						case 4:
							_this.nowState = 4
							break;
						case 5:
							_this.nowState = 5
							break;
						case 6:
							_this.nowState = 5
							break;
						default:
							_this.nowState = 0
					}
				});
			},
			// 防抖点击
			click_shake(fn) {
				if (!_this.shake) {
					fn && typeof fn === 'function' && fn()
					_this.shake = true
					setTimeout(function() {
						_this.shake = false
					}, 500)
				}
			},
			//订单操作
			operate(type) {
				if (type == 2) {
					uni.showModal({
						content: '确认接受订单？',
						success: function(res) {
							if (res.confirm) {
								// 修改议价接口
								_this.$api.post("saveorderdata", {
									order_id: _this.id,
									unit_price: _this.unit_price,
									other_price: _this.other_price
								}).then(data => {});
								//接受订单接口
								_this.$api.post("myorderoperate", {
									order_id: _this.id,
									order_status: type
								}).then(data => {
									_this.getdata()
									_this.$plug.isonshow(2)
								});
							}
						}
					});

				}
				if (type == 7) {
					_this.reason = true
				}
				if (type == 8 || type == 5) {
					let title = "确认本次操作"
					if (type == 8) {
						title = "确认取消订单？"
					} else if (type == 5) {
						title = "确认收货？"
					}
					uni.showModal({
						content: title,
						success: function(res) {
							if (res.confirm) {
								_this.$api.post("myorderoperate", {
									order_id: _this.id,
									order_status: type
								}).then(data => {
									_this.getdata()
									_this.$plug.isonshow(2)
								});
							}
						}
					});
				}

				if (type == 4) {
					//发货 获取物流公司
					_this.$api.get("getLogistics").then(data => {
						console.log(data.length)
						if (data.length > 0) {
							_this.havelogis = true
							_this.cony = data
						} else {
							_this.havelogis = false
						}

						_this.logistics = true
					});
				}
			},

			// 拒绝
			refuse() {
				if (_this.refuse_note.length < 1) {
					uni.showToast({
						title: "请输入拒绝理由",
						icon: "none"
					})
				} else {
					_this.$api.post("myorderoperate", {
						order_id: _this.id,
						refuse_note: _this.refuse_note,
						order_status: 7
					}).then(data => {
						_this.getdata()
						_this.$plug.isonshow(2)
						_this.reason = false
					});
				}
			},
			// 发货提交物流信息
			confirm() {
				console.log(_this.logistics_name, _this.logistics_order_sn, _this.carnum, _this.phone, _this.startDate,
					_this.sendDate, _this.cony_type, _this.issend)
				_this.click_shake(function() {
					let data = [{
						value: _this.logistics_name,
						type: 1,
						title: "请填写物流公司名称"
					}, {
						value: _this.logistics_order_sn,
						type: 1,
						title: "请填写物流单号"
					}]
					if (_this.$plug.verify(data)) {
						_this.$api.post("myorderoperate", {
							order_status: 4,
							logistics_name: _this.logistics_name,
							logistics_order_sn: _this.logistics_order_sn,
							order_id: _this.id,
							carnum: _this.carnum,
							logistics_tel: _this.phone,
							logistics_send_time: _this.startDate,
							logistics_yjdd_time: _this.sendDate,
							logistics_type: _this.cony_type,
							logistics_tab_type: _this.issend ? 1 : 2
						}).then(data => {
							_this.getdata()
							_this.$plug.isonshow(2)
							_this.logistics_name = ""
							_this.logistics_order_sn = ""
							_this.carnum = ""
							_this.logistics = false
						});
					}
				})
			},
			//删除订单
			deleteOrder() {
				uni.showModal({
					content: '确认删除订单？',
					success: function(res) {
						if (res.confirm) {
							_this.$api.get("delmyorder", {
								order_id: _this.id
							}).then(data => {
								_this.$plug.isonshow(2)
								wx.navigateBack({
									delta: 1
								})
							});
						}
					}
				});
			},
			// 查看物流
			expressDetail() {
				uni.navigateTo({
					url: "expressDetail?id=" + _this.id
				})
			},
			// 立即支付
			pay() {
				uni.navigateTo({
					url: "orderPay?outnumber=3&id=" + _this.id
				})
			},
			//填写议价信息
			addprice(type) {
				if (type == 1) {
					if (_this.unit_price.length < 1) {
						uni.showToast({
							title: "请输入待议单价",
							icon: "none"
						})
					} else {
						_this.unit_show = false
						_this.detail.unit_price = _this.unit_price
						_this.detail.count_price = _this.$plug.jia(_this.$plug.cheng(_this.unit_price, _this.detail
							.number), _this.detail.other_price)
					}
				} else {
					if (_this.other_price.length < 1) {
						uni.showToast({
							title: "请输入杂费",
							icon: "none"
						})
					} else {
						_this.other_show = false
						_this.detail.other_price = _this.other_price
						_this.detail.count_price = _this.$plug.jia(_this.$plug.cheng(_this.detail.unit_price, _this.detail
							.number), _this.other_price)
					}
				}
			},
			//立即评价
			goEvaluate() {
				uni.navigateTo({
					url: "/personal/orderEvaluate?id=" + _this.id
				})
			},
			//拨号并记录
			dialing(call_type, client_uid, mobile) {
				_this.$api.post("calllog", {
					calllog_uid: client_uid,
					call_type: call_type
				}).then(data => {
					_this.$plug.dialing(mobile)
				});
			},
			bindDateChange: function(e) {
				_this.goodDate = e.target.value
				_this.detail.arrivaltime = e.target.value
				_this.$api.post("saveOrderTime", {
					order_id: _this.id,
					arrivaltime: e.target.value
				}).then(data => {
					console.log(data)
					uni.showToast({
						title: '修改成功',
						icon: 'success',
						duration: 2000,
						success: function() {
							setTimeout(function() {
								_this.getdata()
							}, 500);
						}
					})
				});
			},
			// 选择物流公司
			setcony: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				_this.cony_type = _this.cony[e.detail.value].type
				_this.logistics_name = _this.cony[e.detail.value].company
			},

			// 选择发货时间
			bindDateChange: function(e) {
				_this.startDate = e.target.value
				console.log(_this.startDate)
			},
			bindSendChange: function(e) {
				_this.sendDate = e.target.value
				console.log(_this.sendDate)
			},

			//切换配送方式
			radioChange: function(e) {
				console.log(e.target.value)
				if (e.target.value == 0) {
					_this.issend = true
					_this.havelogis = true
					_this.logistics_name = ''
					_this.logistics_order_sn = ''
					_this.carnum = ''
					_this.phone = ''
					_this.startDate = ''
					_this.sendDate = ''
				} else {
					_this.havelogis = false
					_this.issend = false
					_this.logistics_name = ''
					_this.logistics_order_sn = ''
					_this.carnum = ''
					_this.phone = ''
					_this.startDate = ''
					_this.sendDate = ''
				}
			},
			getTime() {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				this.nowtime = `${year}-${month}-${day}`
				console.log(`${year}-${month}-${day}`, this.nowtime)
				return `${year}-${month}-${day}`;
			},
			// 跳转到聊天
			chat() {
				let obj = this.detail
				let images = []
				images.push(obj.goods_info.image)
				obj.goods_info.name = obj.memberinfo.name
				obj.goods_info.images = images

				obj.goods_info.client_uid = obj.memberinfo.id
				console.log(obj)
				wx.setStorageSync('list', obj.goods_info)

				uni.navigateTo({
					url: '../chat/chatingroom?type=5' + '&member_type=1'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #F8F8F8;
		padding-bottom: calc(108rpx + env(safe-area-inset-bottom));
	}

	.wrap {
		width: 750rpx;
		background: #38BE8C;
		padding: 34rpx 30rpx 60rpx;
		position: relative;

		.type {
			margin-bottom: 20rpx;
		}

		.date {
			color: #F9E848;
			margin-left: 20rpx;
		}

		.status {
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			text-align: center;
			color: #ffffff;
		}

		.item {
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: left;
			color: #ffffff;
			line-height: 36rpx;
		}

		.white {
			height: 30rpx;
			width: 750rpx;
			background-color: #FFFFFF;
			border-radius: 30rpx 30rpx 0 0;
			position: absolute;
			bottom: 0;
			left: 0;
		}
	}

	.progress {
		background-color: #FFFFFF;
		padding-bottom: 20rpx;
		margin-bottom: 20rpx;

		.line {
			width: 690rpx;
			margin-left: 30rpx;
			margin-bottom: 16rpx;
			background-color: #E0E0E0;
			height: 2rpx;
			position: relative;

			.cur {
				position: absolute;
				top: -10rpx;
				left: 0;
				z-index: 2;

				.line2 {
					height: 2rpx;
					background-color: #38BE8C;
				}

				.dot {
					width: 22rpx;
					height: 22rpx;
					background: #38be8c;
					border-radius: 50%;
				}
			}
		}

		.state {
			text-align: center;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;
			padding-bottom: 50rpx;
			border-bottom: 1rpx solid #EEEEEE;

			view {
				flex: 1;
			}

			.end {
				color: #38BE8C;
			}
		}

		.seller {
			padding: 24rpx 30rpx 28rpx;
			font-size: 20rpx;

			.name {
				font-size: 28rpx;
				color: #333333;
				margin-right: 16rpx;
			}

			.img {
				height: 40rpx;
			}

			.xin {
				font-size: 20rpx;
				height: 28rpx;
				line-height: 26rpx;
				padding-right: 3rpx;
				box-sizing: border-box;
				border: 1rpx solid #00C676;
				color: #00C676;
				margin: 0 13rpx;

				text {
					width: 30rpx;
					display: inline-block;
					background: #00C676;
					color: #FFFFFF;
					text-align: center;
				}
			}

			.shi {
				width: 28rpx;
				height: 28rpx;
				color: #FFFFFF;
				font-size: 20rpx;
				line-height: 26rpx;
				background-color: #FFA909;
				margin: 0 8rpx;
				text-align: center;
			}

			.qi {
				width: 28rpx;
				height: 28rpx;
				color: #FFFFFF;
				font-size: 20rpx;
				line-height: 26rpx;
				background-color: #08BAFF;
				text-align: center;
			}

			.iconfont {
				color: #999999;
			}
		}

		.spec {
			width: 690rpx;
			margin: 20rpx auto;
			border: 1rpx solid #e6e6e6;

			.tr {
				border-bottom: 1rpx solid #e6e6e6;
				display: flex;

				&:last-child {
					border-bottom: none;
				}
			}

			.td {
				min-width: 200rpx;
				line-height: 48rpx;
				font-size: 26rpx;
				padding: 0 26rpx;

				&:last-child {
					border-left: 1rpx solid #e6e6e6;
				}
			}
		}

		.goods {
			padding-left: 30rpx;

			.goodsImg {
				width: 180rpx;
				height: 180rpx;
				background: #EEEEEE;
				margin-right: 22rpx;
			}

			.content {
				width: 480rpx;
			}

			.goodsName {
				font-size: 28rpx;
				color: #333333;
				line-height: 36rpx;
				height: 72rpx;
			}

			.price {
				font-size: 24rpx;
				font-weight: 500;
				color: #f73f3f;
				margin: 8rpx 0 14rpx;
			}

			.sku {
				font-size: 24rpx;
				color: #999999;
			}
		}
	}

	.orderMsg {
		padding: 34rpx 30rpx 1rpx;
		margin-bottom: 20rpx;
		background-color: #FFFFFF;

		.expressDetail {
			width: 400rpx;
			background-color: #19BE6B;
			color: #FFFFFF;
			line-height: 80rpx;
			text-align: center;
			border-radius: 50rpx;
			margin: 0 auto 30rpx;
			font-size: 30rpx;
		}

		.item {
			font-size: 28rpx;
			color: #999999;
			margin-bottom: 44rpx;

			.title {
				width: 200rpx;
				font-size: 28rpx;
				text-align: left;
				color: #333333;
			}

			.value {
				flex: 1;
			}

			text {
				margin-right: 75rpx;
			}

			.tag {
				width: 80rpx;
				height: 42rpx;
				background: #e6e6e6;
				border-radius: 22rpx;
				font-size: 24rpx;
				font-weight: 500;
				text-align: center;
				color: #999999;
				line-height: 42rpx;
			}

			.totalPrice {
				color: #38BE8C;
			}

			.setval {
				border: 2rpx solid #38be8c;
				color: #38be8c;
				padding: 0 10rpx;
				border-radius: 25rpx;
			}
		}
	}

	.foot {
		width: 690rpx;
		height: 108rpx;
		padding: 0 30rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background: #ffffff;
		justify-content: flex-start;
		box-sizing: initial;
		padding-bottom: env(safe-area-inset-bottom);
		flex-direction: row-reverse;

		.btn {
			width: 152rpx;
			height: 70rpx;
			background: #ffffff;
			border: 1rpx solid #333333;
			border-radius: 37rpx;
			font-size: 26rpx;
			line-height: 70rpx;
			text-align: center;
			color: #333333;
			margin-left: 35rpx;

			&:last-child {
				margin-left: 0rpx;
			}
		}

		.btn_fill {
			width: 152rpx;
			height: 70rpx;
			background: linear-gradient(90deg, #38be8c, #06adba 96%);
			border-radius: 36rpx;
			font-size: 26rpx;
			text-align: center;
			line-height: 70rpx;
			color: #ffffff;
			margin-left: 26rpx;
		}
	}


	.modal {
		width: 660rpx;
		text-align: center;
		padding: 40rpx 40rpx 10rpx;

		.title {
			font-size: 36rpx;
			font-weight: 700;
			text-align: center;
			color: #030517;
			line-height: 48rpx;
			margin-bottom: 36rpx;
		}

		.name {
			font-size: 28rpx;
			color: #333333;
			line-height: 90rpx;
			width: 175rpx;
			text-align: left;
		}

		.item {
			margin-bottom: 26rpx;
		}

		input {
			height: 90rpx;
			border: 1rpx solid #999999;
			font-size: 28rpx;
			padding: 25rpx 22rpx;
			margin-left: 20rpx;
			flex: 1;
			text-align: left;
		}

		.confirm {
			font-size: 32rpx;
			font-weight: 700;
			text-align: center;
			color: #38be8c;
			padding: 29rpx 0 26rpx;
			border-top: 1rpx solid #FAFAFA;
			margin-top: 40rpx;
		}

		.mainline {
			height: 90rpx;
			font-size: 28rpx;
			padding: 25rpx 22rpx;
			flex: 1;
			text-align: left;

			.mainlineposition {
				margin-right: 10rpx;
			}
		}

		.ml20 {
			margin-left: 20rpx;
		}

		.check {
			flex: 1;
			position: relative;
			display: flex;
			// align-items: center;

			input {
				padding-right: 65rpx;
			}

			.labox {
				height: 90rpx;
				width: 90rpx;
				position: absolute;
				right: 0;
				z-index: 10;
			}

			.iconfont {
				height: 90rpx;
				line-height: 90rpx;
				transform: rotate(-90deg);
			}
		}
	}
</style>
